<%@page import="com.zretc.entity.Fdtype"%>
<%@page import="java.util.List"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
	<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="../../favicon.ico">

<title>Dashboard Template for Bootstrap</title>

<!--1. Bootstrap core CSS -->
<link href="dist/css/bootstrap.min.css" rel="stylesheet">



<!--2. Custom styles for this template -->
<link href="css/dashboard.css" rel="stylesheet">

</head>

<body>
	<jsp:include page="nav.html"></jsp:include>
	
			<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
				<h2 class="sub-header">新增菜系</h2>
				<!-- 输入新闻类型名称，做ajax校验；按钮点击的时候；文本框失去焦点； -->
				<div class="row clearfix">
					<div class="col-md-8 column">
						<%=request.getAttribute("msg") == null ? "" : request.getAttribute("msg")%>
						<!-- 前端的校验，大家要记得完成一下  onsubmit="return fun()"-->
						<form class="form-horizontal" role="form" action="FdTypeServlet"
							method="post">
							<div class="form-group">
								<label for="inputEmail3" class="col-sm-2 control-label">菜系名称</label>
								<div class="col-sm-10">
									<input type="text" class="form-control" id="fdtypename"
										name="fdtypename" required="required" />
									<div>
										<span id="msg"></span>
									</div>
								</div>
							</div>
							
							<input type="hidden" name="op" value="add">

							<div class="form-group">
								<div class="col-sm-offset-2 col-sm-10">
									<!-- ajax检查的按钮 -->
									<!-- <button type="button" id="btncheck" class="btn btn-default">检查</button> -->
									<button type="submit" class="btn btn-default">增加</button>
								</div>
							</div>
						</form>
					</div>
					<div class="col-md-4 column"></div>
				</div>



			</div>
		
	</div>

	<!-- Bootstrap core JavaScript
    ================================================== -->
	<!--3 - js/jquery-2.0.3.js -->
	<script src="js/jquery-2.0.3.js"></script>
	<!--4 - ootstrap.min.js -->
	<script src="dist/js/bootstrap.min.js"></script>
	<script>
		//标记一下ajaxName函数是否有执行
		var msg = "";

		$(function() {
			//文本框事件 ： 失去焦点
			$("#fdtypename").blur(function() {
				ajaxName();
			});
		});

		function ajaxName() {

			$.ajax({
				//key:value
				url : "FdTypeServlet",
				type : "get",
				data : {
					typename : $("#fdtypename").val(),
					op : "ajaxtypename"
				},
				success : function(data) {

					msg = data;
					//其实在前端有一些必要判断
					if (data.msg == "notexists") {
						//这个内容是在前端自定义的，也给前端人员一些自由
						$("#msg").html("可以使用!");
					} else {
						$("#msg").html("重复了，换一个!");
					}

					//$("#msg")得到页面上额id为msg的哪个span

				},
				dataType : "json"

			});

		}

		function check() {
			//点击增加按钮的时候，都要判断是否有重复的内容(类型重复)
			//1 重复校验和判断
			if (msg == "notexists") {
				return true;//表单要提交
			} else {
				return false;//2表单不提交
			}

		}
	</script>

</body>
</html>